<template>
  <div class="posmap">
    <el-amap
      ref="map"
      :vid="'amapDemo'"
      :center="center"
      :zoom="zoom"
      class="amap-demo"
    >
      <el-amap-marker :position="position" :icon="icon" />
    </el-amap>
  </div>
</template>

<script>
import Vue from 'vue'
import VueAMap from 'vue-amap'

Vue.use(VueAMap)

VueAMap.initAMapApiLoader({
  key: '6989dea6e0de90356536ba5512bed999',
  plugin: [
    'AMap.Autocomplete',
    'AMap.PlaceSearch',
    'AMap.Scale',
    'AMap.OverView',
    'AMap.ToolBar',
    'AMap.MapType',
    'AMap.PolyEditor',
    'AMap.CircleEditor',
    'AMap.Geocoder'
  ],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.15'
})
export default {
  components: {},
  data() {
    return {
      center: [113.807723, 34.794874],
      zoom: 18,
      position: [113.807723, 34.794874],
      icon: '/api/image/contactus/mark.png'
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.amap-demo {
  border-radius: 10px;
  overflow: hidden;
  height: 400px;
  width: 100%;
  margin: auto;
}
:deep(.amap-icon) img {
  width: 20px;
}
</style>